<script lang="ts" setup>
/**
 * CellApiSelect 使用示例文件
 * 展示如何在表格中使用 CellApiSelect 组件进行远程搜索和静态选项渲染
 */

import { ref, reactive } from 'vue'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { message } from 'ant-design-vue'
import { useDebounceFn } from '@vueuse/core'

// 示例：模拟API函数 - 获取供应商选项
const fetchSupplierOptions = async (params: Record<string, any>) => {
  // 模拟API延迟
  await new Promise(resolve => setTimeout(resolve, 500))

  const mockOptions = [
    { label: '供应商A科技有限公司', value: 1 },
    { label: '供应商B贸易有限公司', value: 2 },
    { label: '供应商C实业公司', value: 3 },
    { label: '供应商D集团', value: 4 },
    { label: '供应商E有限公司', value: 5 },
  ]

  // 简单的关键词过滤
  const keyword = params?.keyword || ''
  const filtered = keyword
    ? mockOptions.filter(item => item.label.toLowerCase().includes(keyword.toLowerCase()))
    : mockOptions

  return filtered
}

// 示例：模拟API函数 - 获取物料类型选项
const fetchMaterialTypeOptions = async (params: Record<string, any>) => {
  await new Promise(resolve => setTimeout(resolve, 300))

  const mockOptions = [
    { label: '棉布', value: 'cotton' },
    { label: '化纤布', value: 'synthetic' },
    { label: '混纺布', value: 'blend' },
    { label: '皮革', value: 'leather' },
    { label: '人造革', value: 'synthetic_leather' },
  ]

  const keyword = params?.keyword || ''
  const filtered = keyword
    ? mockOptions.filter(item => item.label.toLowerCase().includes(keyword.toLowerCase()))
    : mockOptions

  return filtered
}

// 表格数据
const tableData = ref([
  {
    id: 1,
    material_name: '纯棉T恤布',
    supplier_id: 1,
    material_type: 'cotton',
    price: 25.50,
    status: 1,
  },
  {
    id: 2,
    material_name: '涤纶面料',
    supplier_id: 2,
    material_type: 'synthetic',
    price: 18.80,
    status: 0,
  },
  {
    id: 3,
    material_name: '棉麻混纺',
    supplier_id: null, // 示例：未选择值
    material_type: '',
    price: 32.00,
    status: 1,
  },
])

// 搜索关键词状态
const searchKeyword = reactive({
  supplier: '',
  material_type: '',
})

// 状态选项（静态选项示例）
const statusOptions = [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 },
]

/**
 * CellApiSelect 值变化回调 - 供应商选择
 * @param newVal 新的选择值
 * @param row 当前行数据
 * @param column 当前列配置
 */
const handleSupplierChange = (newVal: any, row: any, column: any) => {
  console.log('供应商选择变化:', { newVal, row, column })
  message.success(`选择了供应商ID: ${newVal}`)
  // 这里可以添加业务逻辑，比如更新相关字段、计算价格等
}

/**
 * CellApiSelect 值变化回调 - 物料类型选择
 * @param newVal 新的选择值
 * @param row 当前行数据
 * @param column 当前列配置
 */
const handleMaterialTypeChange = (newVal: any, row: any, column: any) => {
  console.log('物料类型选择变化:', { newVal, row, column })
  message.info(`选择了物料类型: ${newVal}`)
  // 可以在这里添加类型相关的业务逻辑
}

// 表格配置
const gridOptions = {
  border: true,
   checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  rowConfig: { useKey: true, keyField: 'id', isHover: true },
  columnConfig: { useKey: true },

  columns: [
    { field: 'id', width: 80, title: 'ID' },
    { field: 'material_name', width: 150, title: '物料名称' },

    // CellApiSelect 示例1：使用API远程搜索（供应商选择）
    // 支持远程搜索、防抖处理、自定义回调等功能
    {
      field: 'supplier_id',
      width: 200,
      title: '供应商',
      cellRender: {
        name: 'CellApiSelect',
        attrs: {
          api: fetchSupplierOptions,  // 远程API函数
          onChange: handleSupplierChange,  // 值变化回调
          onSearch: useDebounceFn((value: string) => {
            searchKeyword.supplier = value  // 更新搜索关键词
          }, 300), // 防抖处理
          params: { keyword: searchKeyword.supplier || undefined },  // 搜索参数
          filterOption: false,  // 禁用客户端过滤
          showSearch: true,     // 显示搜索框
          immediate: false,     // 不立即加载
          alwaysLoad: true,     // 总是重新加载
          componentProps: {     // 额外组件属性
            placeholder: '请选择供应商',
            allowClear: true,   // 允许清空选择
          },
        },
      },
    },

    // CellApiSelect 示例2：使用API远程搜索（物料类型选择）
    // 简化配置，使用默认属性
    {
      field: 'material_type',
      width: 150,
      title: '物料类型',
      cellRender: {
        name: 'CellApiSelect',
        attrs: {
          api: fetchMaterialTypeOptions,
          onChange: handleMaterialTypeChange,
          onSearch: useDebounceFn((value: string) => {
            searchKeyword.material_type = value
          }, 300),
          params: { keyword: searchKeyword.material_type || undefined },
          componentProps: {
            placeholder: '请选择类型',
            allowClear: true,
          },
        },
      },
    },

    // CellApiSelect 示例3：使用静态选项（状态选择）
    // 不使用API，直接使用预定义的选项数据
    {
      field: 'status',
      width: 100,
      title: '状态',
      cellRender: {
        name: 'CellApiSelect',
        attrs: {
          options: statusOptions,  // 静态选项数据
          onChange: (newVal: any, row: any, column: any) => {
            console.log('状态变化:', newVal)
            message.success(`状态已${newVal === 1 ? '启用' : '禁用'}`)
          },
          componentProps: {
            placeholder: '选择状态',
          },
        },
      },
    },

    { field: 'price', width: 100, title: '价格(元)' },
  ],

  data: tableData.value,
}

// 使用表格组件
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})
</script>

<template>
  <div class="cell-api-select-example">
    <h2>CellApiSelect 组件使用示例</h2>

    <div class="example-description">
      <p><strong>CellApiSelect</strong> 是基于表单 <code>ApiSelect</code> 组件封装的表格单元格选择器，支持：</p>
      <ul>
        <li>✅ 远程API数据加载</li>
        <li>✅ 静态选项配置</li>
        <li>✅ 远程搜索和关键字过滤</li>
        <li>✅ 值变化事件回调</li>
        <li>✅ 自定义组件属性</li>
        <li>✅ 防抖搜索优化</li>
        <li>✅ 空值处理和占位符显示</li>
      </ul>

      <h3>使用方法：</h3>
      <pre><code>// 在列配置中使用
cellRender: {
  name: 'CellApiSelect',
  attrs: {
    api: fetchOptions,              // 远程API函数（与表单ApiSelect一致）
    options: staticOptions,         // 或使用静态选项数据
    onChange: handleValueChange,    // 值变化回调
    onSearch: handleSearch,         // 搜索回调（建议配合防抖）
    componentProps: {               // 其他组件属性
      placeholder: '请选择...',
      allowClear: true,
    },
    // 其他属性参考表单ApiSelect组件
  }
}</code></pre>
    </div>

    <div class="example-table">
      <h3>示例表格（点击单元格进入编辑模式）：</h3>
      <Grid />
    </div>

    <div class="tips-section">
      <h3>使用建议：</h3>
      <ul>
        <li><strong>API模式：</strong>当选项数据需要从后端动态获取时使用，支持分页、无限滚动等高级特性</li>
        <li><strong>静态模式：</strong>当选项数据固定且较少时使用，性能更优</li>
        <li><strong>搜索优化：</strong>对于API模式，建议使用 <code>useDebounceFn</code> 进行搜索防抖，避免频繁请求</li>
        <li><strong>事件处理：</strong><code>onChange</code> 回调会收到新值、行数据、列配置，方便进行业务逻辑处理</li>
        <li><strong>属性继承：</strong>完全兼容表单 <code>ApiSelect</code> 组件的所有属性配置</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.cell-api-select-example {
  padding: 20px;
}

.example-description {
  padding: 15px;
  margin-bottom: 30px;
  background: #f5f5f5;
  border-radius: 8px;
}

.example-description code {
  padding: 2px 6px;
  font-family: monospace;
  background: #e8e8e8;
  border-radius: 3px;
}

.example-description pre {
  padding: 15px;
  overflow-x: auto;
  font-size: 14px;
  color: #f8f8f2;
  background: #1a1a1a;
  border-radius: 6px;
}

.example-description pre code {
  padding: 0;
  background: none;
}

.example-table {
  margin-bottom: 30px;
}

.tips-section {
  padding: 15px;
  background: #e6f7ff;
  border-left: 4px solid #1890ff;
  border-radius: 8px;
}

.tips-section ul li {
  margin-bottom: 8px;
}

.tips-section strong {
  color: #1890ff;
}
</style>
